<template>
  <div>
    <el-dialog @open='editerOpen' :title="title" :visible.sync="editerData.show" width="40%" center :close-on-click-modal='false' :before-close="handleClose">
        <el-form :model='editerData.propertyKey' ref="propertyForm" label-position="right" label-width="150px" size="small" :rules="rules">
            <el-form-item :label='name+"名称"' prop="keyName">
                <el-input v-model.trim="editerData.propertyKey.keyName" :placeholder='"请输入"+name+"名称"'></el-input>
            </el-form-item>
            <el-form-item label='属性类型' v-show="editerData.propertyKey.propertyType!='GROUP_NAME'">
                <el-radio-group v-model="editerData.propertyKey.propertyType">
                    <el-radio label='TEXT' >文本</el-radio>
                    <el-radio label='URL' >链接</el-radio>
                    <el-radio label='IMAGE' >图片</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='属性分组' v-show="editerData.propertyKey.propertyType!='GROUP_NAME'">
                <el-select v-model="editerData.propertyKey.upid" placeholder="暂无分组">
                    <el-option label="">暂无分组</el-option>
                    <el-option v-for="item in this.editerData.groupList" :key="item.keyId" :label="item.keyName" :value="item.keyId"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose(()=>{editerData.show=false})" size="mini">关闭</el-button>
        <el-button type="primary" @click="onsubmit('propertyForm')" size="mini">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'propertyEditer',
  data(){
    var checkKeyName=(rule,value,callback)=>{
      if(!value){
        callback(new Error("属性名称不能为空"));
        return;
      }
      var params=new URLSearchParams();
      params.append("keyName",value);
      params.append("keyId",this.editerData.propertyKey.keyId);
      this.$http.post(this.$store.state.url+"/form/unique/keyname",params).then(
        response=>{
          if(response.data.status==200)callback();
          else callback(new Error(response.data.message));
        }
      ).catch();
    };
    return {
      title:'',
      name:'',
      rules:{
        keyName:[
          {required: true, validator: checkKeyName, trigger: 'blur' },
        ],
      },
    }
  },
  methods:{
    onsubmit:function(){
      this.$refs.propertyForm.validate(
          valid=>{
              if(valid)this.submitExecute();
          }
      );
    },
    submitExecute:function(){
      var params=new URLSearchParams();
      for(var key in this.editerData.propertyKey){
        params.append(key,this.editerData.propertyKey[key]);
      }
      this.$http.post(this.$store.state.url+'/addpropertykey',params).then(
        response=>{
          if(response.data.status==200){
            this.$emit("edited",response.data.data);
            this.editerData.show=false;
            this.$message({message: '保存成功',type: 'success'});
          }else{
            this.$message.error('保存失败');
          }
        }
      ).catch(
        error=>{
          this.$message.error('保存失败');
        }
      );
    },
    handleClose:function(done){
      done();
    },
    editerOpen:function(){
      if(this.$refs.propertyForm!=null)this.$refs.propertyForm.resetFields();
      if(this.editerData.propertyKey.keyId==""){
        if(this.editerData.propertyKey.propertyType=="GROUP_NAME"){
          this.title="增加属性分组";
          this.name="属性分组";
        }else{
          this.title="增加属性";
          this.name="属性";
        }
      }else{
        this.title="编辑属性";
        this.name="属性";
        this.$http.post(this.$store.state.url+"/property/getbyid","keyId="+this.editerData.propertyKey.keyId).then(
          response=>{
            if(response.data.status==200){
              this.editerData.propertyKey=response.data.data;
            }else{
              this.$message.error(response.data.message);
              this.editerData.show=false;
            } 
          }
        ).catch(
          error=>{
            this.$message.error("编辑器打开失败");
            this.editerData.show=false;
          }
        );
      }
    }
  },
  created:function(){
  },
  props:['editerData']
}
</script>

<style scoped>
.el-input{
    width:80%
}

</style>
